<!-- 任务执行情况 -->
<template>
  <el-dialog title="选择人员" :visible.sync="dialogTableVisible" @close="$emit('update:visible',false)"
             :close-on-click-modal="false">
    <el-table :data="userList"
              height="400"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              ref="table"
              @row-click="rowClick">
      <el-table-column width="50">
        <template slot-scope="scope">
          <el-radio v-model="radio" :label="scope.row.id" class="radioCheckBox">{{scope.row.id}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="scope">
          {{scope.row.classes?scope.row.classes.class_name:'未记录'}}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realname" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
            :page-size="page.pagesize"
            layout="prev, pager, next"
            :total="page.total"
            @current-change="handleUserChange">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('update:visible',false)" size="small">取 消</el-button>
      <el-button type="primary" @click="userlistGet('yse')" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'taskListDialog',
    props: ['visible', 'optionArry'],
    watch: {
      visible () {
        this.dialogTableVisible = this.visible
      }
    },
    data () {
      return {
        dialogTableVisible: this.visible,
        userList: [],
        tableStyle: tableoption,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        userInfomation: null, // 账户信息
        radio: '', // 选中的id
        applyBox: '' // 选中的人员信息
      }
    },
    created () {
      this.db.findOne({
        name: 'userInfomation'
      }, (err, ret) => {
        this.userInfomation = ret.value
      })
      console.log('本页面的数据:', this.optionArry)
      this.InitFn()
    },
    methods: {
      InitFn () {
        this.$fetch(api.admin_user_index, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            this.userList = response.list.data
            this.page.total = response.list.total
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 行选中
      rowClick (option) {
        let userArray = this.optionArry.users.split(',')
        console.log('userArray:', userArray, option.id, userArray.indexOf(option.id))
        if (userArray.indexOf(option.id.toString()) !== -1) {
          this.$message.error('不能转派给本任务的执行人')
          return
        }
        this.radio = option.id
        this.applyBox = option
      },
      userlistGet () {
        if (!this.applyBox) {
          this.$message.error('请勾选选择的人员')
          return
        }
        this.$emit('getUser', this.applyBox)
      },
      // 用户人员分页
      handleUserChange (val) {
        this.page.pageindex = val
        this.InitFn()
      }
    }
  }
</script>
